import { MciSvgIcon, MciTooltip } from '@/components/base';
import { useGraph } from '@/hooks/useGraph';

export default defineComponent({
  name: 'FlowTools',
  setup() {
    const canRedo = ref(false);
    const canUndo = ref(false);
    const { saveGraph, graph } = useGraph(false);

    setTimeout(() => {
      graph.value?.on('history:change', () => {
        canRedo.value = graph.value?.canRedo() || false;
        canUndo.value = graph.value?.canUndo() || false;
      });
    });

    return () => (
      <div class="flex gap-16 items-center flow-tools">
        <span class="text-label-14">工具</span>

        <MciTooltip content="缩小">
          <MciSvgIcon
            onClick={() => {
              graph.value?.zoom(-0.2);
              graph.value?.centerContent();
            }}
            class="outline-none cursor-pointer"
            width={20}
            height={20}
            color="var(--color-grey-5)"
            name="zoom-out"
          />
        </MciTooltip>

        <MciTooltip content="放大">
          <MciSvgIcon
            onClick={() => {
              graph.value?.zoom(0.2);
              graph.value?.centerContent();
            }}
            class="outline-none cursor-pointer"
            width={20}
            height={20}
            color="var(--color-grey-5)"
            name="zoom"
          />
        </MciTooltip>

        <MciTooltip content="居中">
          <MciSvgIcon
            onClick={() => {
              graph.value?.centerContent();
            }}
            class="outline-none cursor-pointer"
            width={18}
            height={18}
            color="var(--color-grey-5)"
            name="center"
          />
        </MciTooltip>

        <MciTooltip content="撤销">
          <MciSvgIcon
            onClick={() => {
              graph.value?.undo();
            }}
            width={22}
            height={22}
            class={[canUndo.value ? 'cursor-pointer' : '', 'outline-none']}
            color={canUndo.value ? 'var(--color-grey-5)' : 'var(--color-grey-3)'}
            name="undo"
          />
        </MciTooltip>

        <MciTooltip content="重做">
          <MciSvgIcon
            onClick={() => {
              graph.value?.redo();
            }}
            width={22}
            height={22}
            class={[canRedo.value ? 'cursor-pointer' : '', 'outline-none']}
            color={canRedo.value ? 'var(--color-grey-5)' : 'var(--color-grey-3)'}
            name="redo"
          />
        </MciTooltip>

        <MciTooltip content="清空设计">
          <MciSvgIcon
            onClick={() => {
              graph.value?.clearCells();
              saveGraph();
            }}
            width={22}
            height={22}
            class={['cursor-pointer', 'outline-none']}
            color="var(--color-grey-5)"
            name="clear"
          />
        </MciTooltip>
      </div>
    );
  }
});
